<template>
  <div class="attributes-selector">
    <div class="node-content">
      <div class="node-name">{{ data.source.label }}</div>
      <div class="attr-selector">
        <a-select
          v-model="leftItem"
          style="width: 100%;"
          @change="changeLeftItem"
        >
          <template v-if="data.sourceNode">
            <a-select-option :value="data.sourceNode.keyAttr.name"
              >{{ data.sourceNode.keyAttr.name }}
            </a-select-option>
            <a-select-option
              v-for="(item, index) in data.sourceNode.attrs"
              :key="index"
              :value="item.name"
              >{{ item.name }}
            </a-select-option>
          </template>
        </a-select>
      </div>
    </div>
    <div class="center-img">
      <img :src="`${publicPath}/icon/travel-around.png`" />
    </div>
    <div class="node-content">
      <div class="node-name">{{ data.target.label }}</div>
      <div class="attr-selector">
        <a-select
          v-model="rightItem"
          style="width: 100%;"
          @change="changeRightItem"
        >
          <template v-if="data.targetNode">
            <a-select-option :value="data.targetNode.keyAttr.name"
              >{{ data.targetNode.keyAttr.name }}
            </a-select-option>
            <a-select-option
              v-for="(item, index) in data.targetNode.attrs"
              :key="index"
              :value="item.name"
              >{{ item.name }}
            </a-select-option>
          </template>
        </a-select>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { publicPath } from '@/api/constants'

@Component({
  components: {},
})
export default class AttributesSelector extends Vue {
  @Prop({
    default: () => ({}),
  })
  data: any
  @Prop({ default: '' }) left!: any
  @Prop({ default: '' }) right!: any
  private publicPath = publicPath
  public leftItem: string = ''
  public rightItem: string = ''

  @Watch('left')
  public leftItemChange(value: any) {
    this.leftItem = value
  }

  @Watch('right')
  public rightItemChange(value: any) {
    this.rightItem = value
  }

  public changeLeftItem(value: any) {
    this.$emit('left-change', value)
  }

  public changeRightItem(value: any) {
    this.$emit('right-change', value)
  }
}
</script>
<style lang="less" scoped>
.attributes-selector {
  display: flex;
  justify-content: space-between;
}

.btn {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 50px;
}

.node-name {
  margin-bottom: 10px;
}

.node-content {
  width: 45%;
}

.center-img {
  img {
    height: 32px;
    margin-top: 31px;
    width: 32px;
  }
}
</style>
